<template>
  <div class="home-body">
    <header class="search">
      <router-link to="/home/map">{{ city }}</router-link>
      <input type="text" placeholder="点击进行搜索" />
    </header>
    <div class="banner">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in allData.banner" :key="index"
          ><img :src="item.image_url" alt=""
        /></van-swipe-item>
      </van-swipe>
    </div>
    <nav class="nav-bar">
        <div class="item" v-for="(item,index) in allData.channel" :key="index">
          <img :src="item.icon_url" alt="">
          <p>{{item.name}}</p>
        </div>
    </nav>
    <section class="brandList">
        <header>
          品牌制造商直供
        </header>
        <ul>
          <li v-for="item in allData.brandList" :key="item.id" :style="{background: 'url('+item.new_pic_url+')',backgroundSize:'cover'}">
              <p>{{item.name}}</p>
              <p>{{item.floor_price}} 元起</p>
          </li>
        </ul>
    </section>
  </div>
</template>

<script>
// @ is an alias to /src
import { onMounted, ref, reactive, toRefs } from "vue";
import { initMap } from "../../untils/map";
import { homeData, fullData } from "../../network/api/dataNet";
export default {
  name: "Home",
  components: {},
  setup(props, ctx) {
    //获取城市名称
    const city = ref("定位失败");
    initMap().then((res) => {
      city.value = res.city;
    });
    const allData = reactive({
      banner: [],
      brandList: [],
      //第二栏分类
      channel: [],
      hotGoods: [],
      newCategoryList: [],
      newGoods: [],
      topicList: [],
    });
    onMounted(() => {
      homeData().then((res) => {

      });
      fullData().then((res) => {
        allData.banner = res.banner;
        allData.brandList = res.brandList;
        allData.channel = res.channel;
        allData.hotGoods = res.hotGoods;
        allData.newCategoryList = res.newCategoryList;
        allData.newGoods = res.newGoods;
        allData.topicList = res.topicList;
        console.log(res);

      });
    });

    return {
      city,
      allData,
    };
  },
};
</script>
<style lang="scss" scoped>
.home-body {
  width: 100%;
  .search {
    padding: 0 10px;
    display: flex;
    align-items: center;
    border-bottom: 8px solid transparent;
    a {
      width: 20%;
      display: inline-block;
      text-align: center;
      font-size: 16px;
    }
    input {
      // max-width: 180px;
      flex: 1;
      font-size: 12px;
      /* 设置输入框中字体的大小 */
      height: 30px;
      /* 设置输入框的高度 */
      border-radius: 4px;
      /* 设置输入框的圆角的大小 */
      border: 1px solid #c8cccf;
      /* 设置输入框边框的粗细和颜色 */
      color: #986655;
      /* 设置输入框中文字的颜色 */
      outline: 0;
      /* 将输入框点击的时候出现的边框去掉 */
      text-align: left;
      /* 设置输入框中文字的位置 */
      padding-left: 10px;
      display: block;
      /* 将输入框设置为块级元素 */
      cursor: pointer;
      background-color: #f4f4f4;
      box-shadow: 2px 2px 5px 1px #ccc;
      &::-webkit-input-placeholder {
        color: #986655;
        font-size: 12px;
      }
    }
  }
  .banner {
    min-height: 200px;
    img {
      width: 100%;
    }
  }
  .nav-bar{
  display: flex;
  padding: 14px 0px 24px 0px;
  background-color: #fff;
  justify-content: space-between;
  .item{
    width: 20%;
    text-align: center;
    img{
      width: 30px;
    }
    p{
      padding-top: 16px;
    }
  }
  }
  .brandList{
    margin-top: 20px;
    background-color: #fff;
    header{
      padding: 20px 0px;
      text-align: center;
      font-size: 18px;
    }
    ul{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      padding-bottom: 30px;
      & :nth-child(n+3){
          margin-top: 10px;
      }
      li{
        width: 48%;
        height: 116px;
        & :nth-child(1){
          margin: 20px 0px 10px 20px;
        }
        & :nth-child(2){
          margin-left: 20px;
        }
      }

    }
  }
}
</style>